<template>
  <div id="app">
    <header class="head">
      <a class="back tl" href="javascript:history.back(-1)">
        <i class="el-icon-arrow-left"></i>
      </a>
      <a href="javascript:;" class="tc">
        <small class="font_18 co_f">从业人员</small>
      </a>
      <a href="javascript:;" class="save">
        <button @click="submitForm()" type="primary">保存</button>
      </a>
    </header>
    <main>
  
      <div class="formcontent">
        <ul>
          <li>
             <span>头像</span>
             <div class="froms">
               <el-upload
                  class="avatar-uploader"
                  action="https://jsonplaceholder.typicode.com/posts/"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess"
                  :before-upload="beforeAvatarUpload">
                  <img v-if="imageUrl" :src="imageUrl" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
             </div>
          </li>
            <li>
             <span><em>*</em>姓名</span>
             <div class="froms">
               <input v-model="formName.name" v-verify="formName.name">
             </div>
          </li>
          <li>
             <span><em>*</em>性别</span>
             <div class="froms">
                 <el-radio class="radio" v-model="formName.sex" label="1">男</el-radio>
                 <el-radio class="radio" v-model="formName.sex" label="2">女</el-radio>
             </div>
          </li>
           <li>
             <span>年龄</span>
             <div class="froms">
               <input v-model="formName.age">
             </div>
          </li>
           <li>
             <span>编号</span>
             <div class="froms">
               <input v-model="formName.serialNumber">
             </div>
          </li>
           <li>
             <span>工种</span>
             <div class="froms">
               <input v-model="formName.workType">
             </div>
          </li>
           <li>
             <span>身份证号</span>
             <div class="froms">
               <input v-model="formName.idCard">
             </div>
          </li>
           <li>
             <span>身份证号</span>
             <div class="froms">
               <input v-model="formName.phone">
             </div>
          </li>
           <li>
             <span><em>*</em>体检情况</span>
             <div class="froms">
                 <el-radio class="radio" v-model="formName.health" label="1">合格</el-radio>
                 <el-radio class="radio" v-model="formName.health" label="2">未合格</el-radio>
             </div>
          </li>
          <li>
             <span>健康证号码</span>
             <div class="froms">
               <input v-model="formName.healthCode">
             </div>
          </li>
           <li>
             <span>培训情况</span>
             <div class="froms">
              <el-select v-model="formName.training" placeholder="请选择">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
             </div>
          </li>
          <li>
             <span>发证日期</span>
             <div class="froms">
                <el-input
                placeholder="请选择日期"
                icon="date"
                :disabled="true"
                v-model="formName.openDate"
                @click="openPickerdDate()">
              </el-input>
                <mt-datetime-picker ref="picker" type="date" year-format="{value}年" month-format="{value} 月"  date-format="{value} 日" v-model="pickerValue" @cancel="handleCanceDate" @confirm="handleConfirmDate"></mt-datetime-picker>
             </div>
          </li>
           <li>
             <span>到期日期</span>
             <div class="froms">
               <el-input v-model="formName.endDate"  icon="date" disabled ></el-input>
             </div>
          </li>
        </ul>
      </div>
  
    </main>
  </div>
</template>

<script>
  import {
    EnterprisePersonAdd,SingleUpdate
  } from '../../api/api';
   import {
    DatetimePicker
  } from 'mint-ui';
  var moment = require('moment');
  export default {
     components: {
      'mt-datetime-picker': DatetimePicker,
    },
    data() {
      return {
        msg: '请选择人员',
        options: [{
          value: '0',
          label: '未培训'
        }, {
          value: '1',
          label: '已培训'
        }],
        listData:[],
        dataValue: '',
        //组件
        pickerValue:moment().format('YYYY-MM-DD'),//获取当前时间 
        //提交表单add
         formName: { //表单中的参数
                name:"",
                sex:'1',
                age:'',
                serialNumber:'',
                workType:'',
                idCard:'',
                phone:'',
                health:'1',
                healthCode:'',
                training:'',
                openDate:'',
                endDate:'',
            },
        //img
        imageUrl: '',
        fileName:'',    
      };
    },
   verify: {
      formName: {
        name:"required"
    }},
    methods: {
      //获取日期
       openPickerdDate() {
        this.$refs.picker.open();
      },
      handleCanceDate() {
        let _this = this
        _this.pickerValue= _this.formName.openDate
      },
      // 确定按钮 --- 判断该时间是否可选，若可选则把值赋给输入框的dataValue
      handleConfirmDate(val) {
        let _this = this
        _this.formName.openDate = moment(val).format('YYYY-MM-DD')
        _this.formName.endDate = moment(val).add("year",1).format('YYYY-MM-DD 00:00:00')
      },
      //图片上传
       handleAvatarSuccess(res, file) {
         debugger
         this.imageUrl = URL.createObjectURL(file.raw)
         this.fileName =file.raw.name
      },
      //图片上传

      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg'||'image/png';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },
      //提交方法
      submitForm: function() {
         if(!this.$verify.check()){
       this.$message.error('带*号为必填项目,请确认是否填写完毕');
        return;
      }
        let varPictureFile = {
          FileName:''
        }
        let varEnterprise={
        
         Unid:JSON.parse(localStorage.getItem('auth')).enterpriseUnid,
        }
       
        let data = {
          Unid:'',
          Name:this.formName.name,
          Sex:this.formName.sex,
          PictureFile:varPictureFile,
          IndustryType:"",
          Health:this.formName.health,
          Training:this.formName.training,
          SerialNumber:this.formName.serialNumber,
          WorkType:this.formName.workType,
          IdCard:this.formName.idCard,
          Phone:this.formName.phone,
          Age:this.formName.age,
          HealthCode:this.formName.healthCode,
          OpenDate: moment(this.formName.dataValue).format('YYYY-MM-DD 00:00:00'),
          EndDate:this.formName.endDate,
          Enterprise:varEnterprise
        }
        let dataoption = {
          params: {
            Data: JSON.stringify(data),
            UserUnid: JSON.parse(localStorage.getItem('auth')).UserUnid,
           
          }
        }
        //调取接口
        EnterprisePersonAdd(dataoption).then((res) => {
          if (res.success === true) {
            this.$message.success('保存成功');
              this.$router.go(-1);
          } else {
            this.$message.error(res.msg);
          }
        }).catch(function() {
          this.$message.error('网络异常。');
        })
  
      }
    },
     created() {
      },
  }
</script>

<style lang="scss">
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #20a0ff;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width:5rem;
    height: 5rem;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  .avatar-uploader{
    width: 5rem;
    height: 5rem;
  }
  .avatar-uploader-icon{
    font-size: 28px;
    color: #8c939d;
    width: 5rem;
    height: 5rem;
    line-height: 5rem;
    text-align: center;
  }
</style>
